<template>
  <section class="component case-repay-chart">
    <common-title title="回款统计">
      <div slot="append">
        <el-select slot="append" v-model="type" placeholder="请选择" style="float:left" @change="typeModelChange">
          <el-option label="按月统计" value="month">按月统计</el-option>
          <el-option label="按日统计" value="day">按日统计</el-option>
        </el-select>
        <el-date-picker v-model="date" type="year" style="float:left;margin-left:10px;width:180px" placeholder="请选择年份" v-show="type === 'month'" @change="onChange" :clearable='false' align="right"> </el-date-picker>
        <el-date-picker v-model="dateDay" type="daterange" style="float:left;margin-left:10px" placeholder="请选择日期范围" v-show="type !== 'month'" @change="onChange" :clearable='false' align="right"> </el-date-picker>
      </div>

    </common-title>
    <ve-histogram height="450px" legend-position="bottom" :data="caseRepayChart.data" :settings="caseRepayChart.setting" :dataZoom="caseRepayChart.dataZoom" :legend="caseRepayChart.legend" :extend="extend" :tooltip="caseRepayChart.tooltip"></ve-histogram>

  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import NumTypeSelect from "~/components/dashboard/num-type-select.vue";
import { VeHistogram } from "v-charts";
import { Layout, Dependencies } from "~/core/decorator";
import { HomePageService } from '~/services/domain-service/home-page.service';

@Component({
  components: {
    VeHistogram,
    NumTypeSelect
  }
})
export default class CaseRepayChart extends Vue {
  @Dependencies(HomePageService)
  private homePageService: HomePageService

  private currentNumType: number = 0
  private date: any = new Date()
  private dateDay: any = []
  private type: any = 'month'

  private caseRepayChart: any = {
    tooltip:{
      trigger: 'axis' ,
        formatter:(params)=>{
          const color1 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#FFFF99;"></span>'
          const color2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#99CC00;"></span>'
          const index1 = (params.length>0 && params[0].value) ? params[0].value : 0
          const index2 = (params.length>1 && params[1].value) ? params[1].value : 0
          const index3 = (params.length>2 && params[2].value) ? params[2].value : 0
          const index4 = (params.length>3 && params[3].value) ? params[3].value : 0
          const repaynum = index1+index3
          const repaycount = (index2*100+index4*100)/100
          let str0 = '';
          if(params.length>0){
            str0=params[0].marker+""+params[0].seriesName+"："+index1+"<br/>"
          }
          let str1 = '';
          if(params.length>1){
            str1=params[1].marker+""+params[1].seriesName+"："+index2+"<br/>"
          }
          let str2 = '';
          if(params.length>2){
            str2=params[2].marker+""+params[2].seriesName+"："+index3
          }
          let str3 = '';
          if(params.length>3){
            str3=params[3].marker+""+params[3].seriesName+"："+index4+"<br/>"
          }
          return color2+"总金额："+repaycount+"<br/>"+str1+str3+color1+"总笔数："+repaynum+"<br/>"+str0+str2
        }
    },
    data: {
      columns: ['日期', '待确认笔数', '待确认金额', '已到账笔数', '已到账金额'],
      rows: []
    },
    setting: {
      stack: {
         '日期': ['待确认笔数', '已到账笔数'],
         '111': ['待确认金额', '已到账金额'] 
        }
    },
    legend: {
      x: 'center',
      y: 'top'
    },
    dataZoom: [
      {
        type: 'slider',
        show: false,
        maxValueSpan: 14,
      },
      {
        type: 'inside',
        maxValueSpan: 14,
        zoomLock: true
      }
    ]
  }
  private extend: any = {
    series: {
      barWidth: 25,
    }
  }

  private onChange() {
    this.updateData()
  }
  private typeModelChange(val) {
    if (val === 'month') this.dateDay = []
    else this.date = ''
  }

  private updateData() {
    const date: any = new Date(this.date)
    // 按日的时候year的参数传什么都可以
    const year: any = this.type === 'month' ? date.getFullYear() : '1'
    const time: any = {
      startDate: this.dateDay.length ? this.$filter.dateRanageFormat(this.dateDay).start : '',
      endDate: this.dateDay.length ? this.$filter.dateRanageFormat(this.dateDay).end : ''
    }
    const params: any = {
      timeType: this.type,
      year,
      ...time
    }
    this.homePageService.getRepaymentChart(params).subscribe(
      data => {
        this.caseRepayChart.data.rows = data
        this.caseRepayChart.dataZoom[0].show = (data.length > 15)
      }
    )
  }

  private mounted() {
    this.updateData();
  }
}
</script>

<style lang="less" scoped>
</style>
